<template>
	<view class="search-coupon">

		<!-- 时间筛选 -->
		<!-- <view class="date-range">
			<uni-datetime-picker v-model="range" type="daterange" :clear-icon="false" :border="false"
				@change="maskClick" />
		</view> -->

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-title">车主姓名</view>
			<input class="search-input" type="text" v-model="name" placeholder="输入关键字模糊查询"
				placeholder-class="placeholderClass">
		</view>
		<view class="search-box">
			<view class="search-title">车牌号</view>
			<input class="search-input" type="text" v-model="lsn" placeholder="输入关键字模糊查询"
				placeholder-class="placeholderClass">
		</view>

		<button class="search-btn" @click="handleSearch">查询</button>

		<view class="user-box-list" v-if="userList.length > 0">
			<view class="title">用户列表 {{userList.length}}</view>
			<view class="user-list">
				<view class="user-item" v-for="(item, index) in userList" :key="index"
					@click="handleFindUserCoupon(item)">
					<view class="user-name">
						<view class="user-info">
							<text>{{item.name}}</text>
							<text class="lsn">（{{item.lsn}}）</text>
						</view>
						<view class="user-coupon-time">领券时间:{{item.createTime}}</view>
					</view>
					<van-icon class="arrow-icon" name="arrow" />
				</view>
			</view>
		</view>
		<!-- <view class="search-box" v-if="!isCharge">
			<van-icon class="search-icon" name="search" />
			<input class="search-input" type="text" placeholder="请输入车主姓名或车牌号" placeholder-class="placeholderClass">
		</view> -->

		<!-- <view class="search-box" v-else>
			<van-icon class="search-icon" name="scan" />
			<input class="search-input" type="text" placeholder="请输入车主姓名或车牌号" placeholder-class="placeholderClass">
		</view> -->

		<!-- 查询结果列表 -->
		<!-- <view class="result-list-box">
			<view class="result-item" v-for="(item, index) in couponList" :key="index">
				<view class="item-header-box">
					<view class="item-header-left-box">
						<image class="user-avatar" src="../../static/logo.jpg" mode="aspectFit"></image>
						<view class="user-info-box">
							<view class="user-name">Ed sheeran</view>
							<view class="user-car">车牌号：N090SC</view>
						</view>
					</view>

					<view class="charge-btn" v-if="isCharge" @click="handleChargeCoupon">核销卡券</view>
				</view>

				<view class="line"></view>

				<view class="coupon-content-box">
					<view class="coupon-info-item">
						<view class="info-label">卡劵类型</view>
						<view class="info-value coupon-type-value">抵扣劵</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">卡劵名称</view>
						<view class="info-value coupon-name-value">轮胎买3送1活动劵</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">适用范围</view>
						<view class="info-value">轮胎使用</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">有效时间</view>
						<view class="info-value">2022-11-31 至 2022-12-31</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">发放时间</view>
						<view class="info-value">2022-12-01 00:00:00</view>
					</view>
					<view class="coupon-info-item">
						<view class="info-label">核销时间</view>
						<view class="info-value">2022-12-16 00:00:00</view>
					</view>
				</view>

				<image v-if="!isCharge" class="coupon-charge-img" src="../../static/coupon/coupon-charge.png"
					mode="widthFix"></image>
			</view>
		</view> -->

		<view class="height"></view>


		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-coupon-title">所持优惠券 (可用{{cur_user_normal_coupon_list.length}})</view>
			<view class="popup-coupon-list">
				<!-- 可用券 -->
				<view class="coupon-item" v-for="(item, index) in cur_user_normal_coupon_list" :key="index">
					<view class="header-box">
						<view class="header-left-box"
							:class="{'expired': item.coupon_state == 'EXPIRED' || item.coupon_state == 'USED'}">
							<view class="coupon-type" v-if="item.stock_type == 'NORMAL'">满减券</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'DISCOUNT'">折扣券
							</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'EXCHANGE'">换购券
							</view>
							<view class="get-coupon-num" v-if="item.stock_type == 'NORMAL'">
								<text>满{{item.coupon_use_rule.fixed_normal_coupon.transaction_minimum / 100}}元</text>
								<text>减{{item.coupon_use_rule.fixed_normal_coupon.discount_amount / 100}}</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'DISCOUNT'">
								<text>满{{item.coupon_use_rule.discount_coupon.transaction_minimum / 100}}元</text>
								<text>享{{item.coupon_use_rule.discount_coupon.discount_percent / 10}}折</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'EXCHANGE'">
								<text>满{{item.coupon_use_rule.exchange_coupon.transaction_minimum / 100}}元可换</text>
							</view>
						</view>
						<view class="header-right-box">
							<view class="coupon-name">{{item.stock_name}}</view>
							<view class="coupon-date">
								有效期：{{item.receive_time}} 至 {{item.expire_time}}
							</view>
						</view>
					</view>

					<view class="line"></view>

					<view class="bottom-box">适用范围：{{item.goods_name}}</view>
				</view>

				<!-- 已核销券 -->
				<view class="coupon-item" v-for="(item, index) in cur_user_used_coupon_list" :key="index">
					<view class="header-box">
						<view class="header-left-box"
							:class="{'expired': item.coupon_state == 'EXPIRED' || item.coupon_state == 'USED'}">
							<view class="coupon-type" :class="" v-if="item.stock_type == 'NORMAL'">满减券</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'DISCOUNT'">折扣券
							</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'EXCHANGE'">换购券
							</view>
							<view class="get-coupon-num" v-if="item.stock_type == 'NORMAL'">
								<text>满{{item.coupon_use_rule.fixed_normal_coupon.transaction_minimum / 100}}元</text>
								<text>减{{item.coupon_use_rule.fixed_normal_coupon.discount_amount / 100}}</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'DISCOUNT'">
								<text>满{{item.coupon_use_rule.discount_coupon.transaction_minimum / 100}}元</text>
								<text>享{{item.coupon_use_rule.discount_coupon.discount_percent / 10}}折</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'EXCHANGE'">
								<text>满{{item.coupon_use_rule.exchange_coupon.transaction_minimum / 100}}元可换</text>
							</view>
						</view>
						<view class="header-right-box">
							<view class="coupon-name">{{item.stock_name}}</view>
							<view class="coupon-date">
								有效期：{{item.receive_time}} 至 {{item.expire_time}}
							</view>
						</view>
					</view>

					<view class="line"></view>

					<view class="bottom-box">适用范围：{{item.goods_name}}</view>
					<!-- 卡券过期提示 -->
					<view class="residue-box used">
						<text class="residue-num used-num">已核销</text>
					</view>
				</view>

				<!-- 已过期券 -->
				<view class="coupon-item" v-for="(item, index) in cur_user_expired_coupon_list" :key="index">
					<view class="header-box">
						<view class="header-left-box"
							:class="{'expired': item.coupon_state == 'EXPIRED' || item.coupon_state == 'USED'}">
							<view class="coupon-type" :class="" v-if="item.stock_type == 'NORMAL'">满减券</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'DISCOUNT'">折扣券
							</view>
							<view class="coupon-type" v-else-if="item.stock_type == 'EXCHANGE'">换购券
							</view>
							<view class="get-coupon-num" v-if="item.stock_type == 'NORMAL'">
								<text>满{{item.coupon_use_rule.fixed_normal_coupon.transaction_minimum / 100}}元</text>
								<text>减{{item.coupon_use_rule.fixed_normal_coupon.discount_amount / 100}}</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'DISCOUNT'">
								<text>满{{item.coupon_use_rule.discount_coupon.transaction_minimum / 100}}元</text>
								<text>享{{item.coupon_use_rule.discount_coupon.discount_percent / 10}}折</text>
							</view>
							<view class="get-coupon-num" v-else-if="item.stock_type == 'EXCHANGE'">
								<text>满{{item.coupon_use_rule.exchange_coupon.transaction_minimum / 100}}元可换</text>
							</view>
						</view>
						<view class="header-right-box">
							<view class="coupon-name">{{item.stock_name}}</view>
							<view class="coupon-date">
								有效期：{{item.receive_time}} 至 {{item.expire_time}}
							</view>
						</view>
					</view>

					<view class="line"></view>

					<view class="bottom-box">适用范围：{{item.goods_name}}</view>
					<!-- 卡券过期提示 -->
					<view class="residue-box expired">
						<text class="residue-num expired-num">已过期</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				lsn: "",
				name: "",
				isCharge: true,
				range: [],
				beginDate: "",
				endDate: "",
				couponList: [{}, {}],
				userList: [],
				paged: {
					"offset": 0,
					"limit": 20
				},
				cur_user_normal_coupon_list: [],
				cur_user_used_coupon_list: [],
				cur_user_expired_coupon_list: [],
			}
		},
		methods: {
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			maskClick(e) {
				this.beginDate = e[0] + " 00:00:00";
				this.endDate = e[1] + " 00:00:00";
				console.log('Click:', this.beginDate, this.endDate);
			},
			handleChargeCoupon() {
				uni.navigateTo({
					url: "/packageD/coupon/coupon-charge"
				})
			},
			// 查询用户
			handleSearch() {
				let {
					name,
					lsn
				} = this;
				let that = this;
				getApp().showLoading();
				apiRqs._findUserOpenid({
					lsn,
					name
				}).then(res => {
					console.log('查询结果', res);
					uni.hideLoading();
					if (res.code == 200) {
						if (res.data.length > 0) {
							that.userList = res.data;
						} else {
							getApp().showToast('无匹配用户');
							return false;
						}
					}
				})
			},
			// 点击用户查询用户名下卡券
			handleFindUserCoupon(item) {
				const SubMchId = uni.getStorageSync("couponTokenInfo").SubMchId;
				// const SubMchId = "1655918740";
				let userOpenid = item.openId;
				getApp().showLoading();
				apiRqs._getUserCoupon(userOpenid, {
					"appid": "wxadc26d832d9c62d2",
					"creator_merchant": "1655918740",
					"belong_merchant": SubMchId,
					// "sender_merchant": SubMchId,
					"offset": this.paged.offset,
					"limit": this.paged.limit
				}).then(res => {
					uni.hideLoading();
					console.log('用户名下卡券', res);
					if (res.code == 200 && res.data.resultCode.stateCode == "200") {
						let newData = JSON.parse(JSON.stringify(res.data.data));
						for (let i = 0; i < newData.length; i++) {
							// 1.处理日期格式
							let new_receive_time = newData[i].receive_time.split("+")[0];
							// newData[i].receive_time = new_receive_time.replace(/T/, " ");
							newData[i].receive_time = new_receive_time.split("T")[0];
							let new_expire_time = newData[i].expire_time.split("+")[0];
							// newData[i].expire_time = new_expire_time.replace(/T/, " ");
							newData[i].expire_time = new_expire_time.split("T")[0];
							// 2.将券类型分类存储
							if (newData[i].coupon_state == 'SENDED') {
								this.cur_user_normal_coupon_list = this.cur_user_normal_coupon_list.concat(newData[
									i]);
							} else if (newData[i].coupon_state == 'USED') {
								this.cur_user_used_coupon_list = this.cur_user_used_coupon_list.concat(newData[i]);
							} else {
								this.cur_user_expired_coupon_list = this.cur_user_expired_coupon_list.concat(
									newData[i]);
							}
						}
						this.$refs.popup.open('bottom');
					} else if (res.code == 200 && res.data.resultCode.stateCode != "200") {
						getApp().showToast(res.data.resultCode.errorMessage);
					} else if (res.code != 200) {
						getApp().showToast(res.msg);
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.search-coupon {
		.search-box {
			margin: 20px;

			.search-title {
				font-size: 12px;
				color: rgba(0, 0, 0, 0.4);
			}

			.search-icon {
				font-size: 18px;
				color: rgba(0, 0, 0, 0.3);
				width: 18px;
				flex: 0 0 18px;
			}

			.search-input {
				border-radius: 4px;
				background-color: #fff;
				border: 1px solid rgba(0, 0, 0, 0.05);
				font-size: 12px;
				color: #666;
				margin-top: 10px;
				padding: 10px 15px;
			}

			.placeholderClass {
				color: #ddd;
			}
		}

		.result-list-box {
			margin: 0 20px;

			.result-item {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				margin-top: 20px;
				box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
				padding: 20px;
				position: relative;

				.item-header-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-header-left-box {
						flex: 1;
						display: flex;
						align-items: center;

						.user-avatar {
							width: 48px;
							height: 48px;
							border-radius: 50%;
						}

						.user-info-box {
							margin-left: 10px;

							.user-name {
								font-size: 16px;
								color: rgba(0, 0, 0, 0.80);
								font-weight: 500;
							}

							.user-car {
								font-size: 12px;
								color: rgba(101, 101, 101, 1);
								margin-top: 3px;
							}
						}
					}

					.charge-btn {
						width: 70px;
						flex: 0 0 70px;
						text-align: center;
						padding: 3px 0;
						border: 1px solid rgba(255, 165, 61, 1);
						color: rgba(255, 165, 61, 1);
						font-size: 11px;
						border-radius: 40px;
						margin-left: 10px;
					}

				}

				.line {
					width: 100%;
					height: 1px;
					background-color: rgba(0, 0, 0, 0.06);
					margin-top: 15px;
				}

				.coupon-content-box {
					margin-top: 15px;

					.coupon-info-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10px;

						&:first-child {
							margin-top: 0;
						}

						.info-label {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.30);
						}

						.info-value {
							font-size: 12px;
							color: rgba(0, 0, 0, 0.50);

							&.coupon-type-value {
								color: rgba(255, 165, 61, 1);
								font-weight: 600;
							}

							&.coupon-name-value {
								color: rgba(0, 0, 0, 0.70);
								font-weight: 600;
							}
						}
					}
				}

				.coupon-charge-img {
					position: absolute;
					right: 8px;
					top: 10px;
					width: 70px;
					height: 70px;
				}
			}
		}

		.height {
			height: 30px;
		}

		.search-btn {
			margin: 20px;
			border: none;
			background-color: #FFA53D;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;
			box-shadow: inset 0px 4px 7px 0px rgba(255, 255, 255, 0.33);

			&::after {
				border: none;
			}

			&:active {
				background-color: rgba(255, 141, 10, 1);
			}
		}

		.user-box-list {
			margin: 20px;

			.title {
				font-size: 12px;
				color: rgba(0, 0, 0, 0.3);
			}

			.user-list {
				margin-top: 10px;

				.user-item {
					padding: 15px 10px 15px 15px;
					background-color: #fff;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;

					.user-name {
						.user-info {
							font-size: 14px;
							color: #000;

							.lsn {
								color: #666;
							}
						}

					}

					.user-coupon-time {
						font-size: 12px;
						color: #999;
						margin-top: 6px;
					}

					.arrow-icon {
						font-size: 12px;
						color: rgba(0, 0, 0, 0.2);
					}

					&:active {
						background-color: #f1f1f1;
					}
				}
			}
		}

		.popup-coupon-title {
			margin: 20px 0 0 20px;
			font-size: 12px;
			color: rgba(0, 0, 0, 0.5);
		}

		.popup-coupon-list {
			max-height: 400px;
			overflow-y: auto;
			padding-top: 10px;
			padding-bottom: 30px;
			margin-top: 10px;

			.coupon-item {
				background-color: #fff;
				border-radius: 10px;
				padding: 10px 20px;
				position: relative;
				margin: 20px 20px 0 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

				&:first-child {
					margin-top: 0px;
				}

				.header-box {
					display: flex;
					align-items: center;

					.header-left-box {
						width: 70px;
						flex: 0 0 70px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.coupon-type {
							font-size: 16px;
							color: rgba(255, 165, 61, 1);
							font-weight: 500;
						}

						.get-coupon-num {
							font-size: 10px;
							color: rgba(0, 0, 0, 0.50);
							margin-top: 3px;
							text-align: center;
						}

						&.expired {
							.coupon-type {
								color: rgba(0, 0, 0, 0.50);
							}
						}
					}

					.header-right-box {
						flex: 1;
						margin-left: 10px;
						margin-top: 5px;

						.coupon-name {
							font-size: 18px;
							color: rgba(0, 0, 0, 0.90);
							font-weight: 500;
						}

						.coupon-date {
							font-size: 10px;
							color: rgba(0, 0, 0, 0.50);
							margin-top: 5px;
						}
					}
				}

				.line {
					width: 100%;
					height: 1px;
					background-color: rgba(0, 0, 0, 0.10);
					margin-top: 20px;
				}

				.bottom-box {
					margin-top: 14px;
					font-size: 10px;
					color: rgba(0, 0, 0, 0.50);
				}

				.residue-box {
					position: absolute;
					right: 0;
					top: 0;
					width: 65px;
					height: 33px;
					background-image: url("../../static/coupon/coupon-list-right-icon.png");
					background-repeat: no-repeat;
					background-size: 100%;
					border-top-right-radius: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-left: 5px;
					padding-bottom: 6px;
					box-sizing: border-box;

					&.expired {
						background-image: url("../../static/coupon/coupon-expired-right-icon.png");
					}

					&.used {
						background-image: url("../../static/coupon/coupon-used-right-icon.png");
					}

					.residue-num {
						font-size: 15px;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);

						&.expired-num {
							font-size: 13px;
						}

						&.used-num {
							font-size: 13px;
						}
					}
				}
			}
		}
	}
</style>